<template>
	<view class="walletDetais-buy">
		<view class="walletDetais-buy-list">
			<view
				class="wbl wbl-item"
				v-for="(key, index) in buys"
				:key="index"
				@click="goDetails(key)"
			>
				<view class="wbl-item-info">
					<view class="wbl-item-info-id">
						<view
							class="wbl-item-info-icon iconfont"
							:style="{color: key.labType.color}"
							:class="[key.labType.icon]"
						></view>
					</view>
					<view class="wbl-item-info-sum">
						<text>{{ key.labType.name}}</text>
						<text class="time">{{ key.time }}</text>
					</view>
				</view>
				<view class="wbl-item-info-sum right">
					<text class="sum" :style="{color: key.labType.color}">
						{{ key.count }}
					</text>
					<text class="uts">{{ key.labType.value }}</text>
				</view>
			</view>
			<loadding-more
				:noData="noData"
				:loadEnd="loadEnd"
				@LoadEmitd="getSEEDBill"
			></loadding-more>
		</view>
	</view>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import LoaddingMore from '../../../../components/loadding-more.vue';
export default {
	props: {
		active: {
			type: Number
		}
	},
	components: {
		LoaddingMore
	},
	data() {
		return {
			buys: [],
			loadEnd: false,
			noData: false
		};
	},
	onShow() {
		this.getSEEDBill();
	},
	onReachBottom() {
		this.getSEEDBill();
	},
	watch: {
		active(val) {
			if (this.buys.length > 1) return;
			this.getSEEDBill();
		}
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	methods: {
		...mapActions(['setTRDetails']),
		goDetails(key) {
			return;
			this.setTRDetails(key);
			uni.navigateTo({
				url: '/pages/bookkeeping/record/details?type=1'
			});
		},
		getSEEDBill() {
			if (this.active !== 0) return false;
			this.$http
				.getSEEDBill({ uid: this.userInfo.id })
				.then(e => {
					if (e.data) {
						let data = e.data;
						data.forEach(e => {
							e.labType = this.LABType(e.type)
						})
						this.buys = data
					}
					this.noData = false;
					this.loadEnd = true;
				})
				.catch(err => {
					this.noData = true;
				});
		},
		LABType(val) {
			switch (val) {
				case '1':
					return {
						name: '充值',
						icon: 'iconchongzhi',
						color: '#aace36 ',
						value: ''
					};
				case '2':
					return {
						name: '兑换收入',
						icon: 'iconzhuanhuan',
						color: '#aace36 ',
						value: 'LABtk兑换'
					};
				case '3':
					return {
						name: '兑换支出',
						icon: 'iconzhichuqingkuang',
						color: '#f4544d',
						value: '兑换LABtk'
					};
				case '4':
					return {
						name: '投入锁仓',
						icon: 'icondongjiejine',
						color: '#f4544d',
						value: 'LAB锁仓'
					};
				default:
				return {
					name: '充值',
					icon: 'iconchongzhi',
					color: '#aace36 ',
					value: ''
				};
			}
		}
	}
};
</script>
<style scoped lang="scss">
@import '../../../../common/wallet-details.scss';
.wbl-item-info-sum {
	font-size: 28upx;
	.sum {
		font-size: 36upx;
	}
	.uts {
		margin-top: 5upx;
	}
	&.right {
		text-align: right;
		line-height: 1.2;
	}
	.time {
		line-height: 1.2;
		font-size: 22upx;
		color: #9b9b9b;
	}
}
</style>
